<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>


<body style="padding:30px;">
    <h1>
        <caption style="padding-top:30px;">用户信息资料</caption>
    </h1>
    <button id="add" style="float: left;" class="btn btn-info" data-toggle="modal" data-target="#myModal" onclick="add()">新增</button>
    <button style="float: left;" class="btn btn-info" onclick="del()">刪除</button>
    <button style="float: left;" class="btn btn-info" data-toggle="modal" data-target="#myModal" onclick="edit()">编辑</button>
    <button style="float: left;" class="btn btn-info" onclick="search()"  >查询</button>
    <form id="search" class="form-inline" style="float: left;">
        <input type="email" class="form-control" placeholder="按工号查询">
        <input type="email" class="form-control" placeholder="按名字查询">

    </form>
    <table class="table table-responsive">
        <thead>
            <tr>
                <th>序号</th>
                <th>工号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>密码</th>
                <th>年龄</th>
                <th>出生日期</th>
            </tr>
        </thead>

        <tbody id="tbody">
            <!-- <tr class="info">
                <td> <input type="checkbox"></td>
                <td>1001</td>
                <td>张三</td>
                <td>女</td>
                <td>1234</td>
                <td>29</td>
                <td>1991-1-1</td>
            </tr>
            <tr class="warning">
                <td> <input type="checkbox"></td>
                <td>1002</td>
                <td>李四</td>
                <td>男</td>
                <td>1234</td>
                <td>28</td>
                <td>1992-2-2</td>
            </tr>
            <tr class="info">
                <td> <input type="checkbox"></td>
                <td>1003</td>
                <td>王五</td>
                <td>女</td>
                <td>1234</td>
                <td>29</td>
                <td>1991-1-1</td>
            </tr>
            <tr class="warning">
                <td> <input type="checkbox"></td>
                <td>1004</td>
                <td>赵六</td>
                <td>女</td>
                <td>1234</td>
                <td>28</td>
                <td>1991-3-5</td>
            </tr> -->

        </tbody>
    </table>

    <!-- 声明定义模态框组件 -->
    <div class="modal" id="myModal" data-backdrop="static">
        <!-- 窗口声明 -->
        <div class="modal-dialog">
            <!-- 内容声明 -->
            <div class="modal-content">
                <!-- 1.框的标题 -->
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">
                        <span>&times;</span> </button>
                    <h4 class="modal-title">请输入新增用户信息</h4>
                </div>
                <!-- 2.框内信息 -->
                <from id="from">
                    <div id="" class="modal-body">
                        <!-- 只能输入4位数字 -->
                        <hr> 工号:<input id="id" type="text" maxlength="4"
                            oninput="this.value=this.value.replace(/[^0-9]/g,'');">
                        <!-- 姓名为中文 -->
                        <hr> 姓名:<input id="name" type="text" maxlength="4"
                            onkeyup="this.value=this.value.replace(/[^\u4e00-\u9fa5]/g,'')">
                        <!-- 性别单选 -->
                        <hr> 性别:
                        <div id="sex" class="btn-group" data-toggle="buttons">
                            <label class="radio-inline">
                                <input type="radio" name="gender" value="男"> 男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="gender" value="女"> 女
                            </label>
                        </div>
                        <hr> 密码:<input id="psw" type="password">
                        <!-- 年龄为1-120岁-->
                        <hr> 年龄:<input id="age" type="text" maxlength="3" oninput="this.value=this.value.replace(/[^0-9]/g,'');">
                        <!-- 输入为日期格式 -->
                        <hr> 出生<br />日期:<input id="date" type="date" value="2014-01-13">
                    </div> <!-- 3.框的按钮 -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-info" data-dismiss="modal" onclick="submit()">确定</button>
                        <button class="btn btn-default" data-dismiss="modal">取消 </button>
                    </div>
                </from>
            </div>
        </div>
    </div>

    </div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
    var is_add = true // true 新增 false 编辑
    var edit_id = ''

    var table = [
        // {'id':"1",'name':"1",'sex':"1",'psw':"1",'age':"1",'date':"1"},{}
    ]

    function add(){
        is_add = true
    }

    function submit() {
        
        let from = document.getElementById('from')
        let inputs = from.getElementsByTagName('input')
        let keys = ['id','name','sex','psw','age','date']
        let line = {}

        for(let i=0;i<keys.length;i++){
            let value
            if(keys[i] === 'sex'){
                value = $("input[name='gender']:checked")[0]?.value
                console.log(value);
            }else{
                value = document.getElementById(keys[i]).value
            }
            line[keys[i]] = value
            // console.log(inputs[i].value);
        }
        if(is_add) table.push(line)
        else table[edit_id] = line
        render(table)
    }

    function render(table){
        var tbody = document.getElementById('tbody')
        tbody.innerHTML = ""
        table.forEach((v,k)=>{
            let line = document.createElement('tr')
            line.className = k%2==0?'warning':'info'
            line.innerHTML=`
            <td> <input type="checkbox" name="checkbox" id=${k}></td>
            <td>${v.id}</td>
            <td>${v.name}</td>
            <td>${v.sex}</td>
            <td>${v.psw}</td>
            <td>${v.age}</td>
            <td>${v.date}</td>
            `
            tbody.appendChild(line)
        })
    }
    
    render(table)

    function del(){
        is_add = false
        var input_checked = $("#tbody input[name='checkbox']:checked")
        for(let i=0;i<input_checked.length;i++){
            table.splice(i,1)
            input_checked[i].parentNode.parentNode.remove()
        }
    }

    function search(){
        let id = $('#search input')[0].value
        let name = $('#search input')[1].value
        render(table.filter(v=>{
            return (id===''||v.id===id) && (name===''||v.name===name)
        }))
        console.log($('#search input'));
    }

    function edit(){
        is_add = false
        let from1 = document.getElementById('from1')
        let inputs1 = from.getElementsByTagName('input')
        let keys = ['id','name','sex','psw','age','date']
        let line = {}
        var input_checked = $("#tbody input[name='checkbox']:checked")
        if(!input_checked.length)return
        let row = table[input_checked[0].id]
        edit_id = input_checked[0].id
        for(let i=0;i<keys.length;i++){
        
            if(keys[i] === 'sex'){
                // console.log($("input[name='gender']"));
                // $("input[name='gender']")[row.sex==='男'?0:1]?.checked = 'checked'
            }else{
                document.getElementById(keys[i]).value = row[keys[i]]
                console.log(row[keys[i]]);
                // console.log(document.getElementById(keys[i]));
            }
            // console.log(inputs[i].value);
        }
    }
</script>
</html>